import Utils from "./Utils1.js";
export default class StepNumber extends EventTarget{
    elem;
    static cssBool=false;
    static STEP_CHANGE_EVENT="step_change_event";
    left;
    right;
    input;
    clickHandler;
    inputHandler
    step=1;
    ids;
    static stepList=[];
    constructor(){
        super();
        this.elem=document.createElement("div");
        this.elem.className="stepNumber"
        this.render();
        StepNumber.setCss();
        this.left=this.elem.querySelector(".left1");
        this.right=this.elem.querySelector(".right1");
        this.input=this.elem.querySelector("input");
        this.left.style.color="#CCC";
        this.clickHandler=e=>this.clickHandlers(e);
        this.inputHandler=e=>this.inputHandlers(e);
        this.left.addEventListener("click",this.clickHandler);
        this.right.addEventListener("click",this.clickHandler);
        this.input.addEventListener("input",this.inputHandler)
        StepNumber.stepList.push(this);
    }
    
    clickHandlers(e){
        if(e.currentTarget===this.left){
            // console.log(this.step)
            this.setStep(this.step-1);
        }else{
            this.setStep(this.step+1);
            // console.log("ccc")
        }
        this.dispatch();
    }

    inputHandlers(e){
        this.input.value=this.input.value.replace(/\D/g,"");
        if(this.ids) return;
        this.ids=setTimeout(()=>{
            clearTimeout(this.ids);
            this.ids=undefined;
            this.setStep(this.input.value);
            this.dispatch();
        },500);
    }

    setStep(_step){
        // console.log(_step)
        this.step=~~_step;
        this.left.style.color=this.right.style.color="#000";
        if(this.step<1){
            this.step=1;
            this.left.style.color="#CCC";
        }
        if(this.step>99){
            this.step=99;
            this.right.style.color="#CCC";
        }
        this.input.value=this.step+"";
    }
    dispatch(){
        var evt=new Event(StepNumber.STEP_CHANGE_EVENT);
        evt.step=this.step;
        this.dispatchEvent(evt);
    }

    appendTo(parent){
        if(typeof parent==="string") parent=document.querySelector(parent);
        parent.appendChild(this.elem);
    }
    render(){
        this.elem.innerHTML=`
            <div class='left1'>-</div>
            <input type='text' value='1'class="nn">
            <div class='right1'>+</div>
        `
    }
    static setCss(){
        if(StepNumber.cssBool) return;
        StepNumber.cssBool=true;
        Utils.addCss(`
        .stepNumber{
            width: 80px!important;
            height: 20px!important;
            display:inline-block!important;
        }
        .stepNumber>.left1,.stepNumber>.right1{
            position:static!important;
            width: 15px!important;
            height: 20px!important;
            background-color: #F1F1F1!important;
            border:1px solid #cbcbcb!important;
            color:black!important;
            float: left!important;
            text-align: center!important;
            user-select: none!important;
        }
        
        
        .stepNumber>input{
            width: 42px!important;
            height: 18px!important;
            line-height: 18px!important;
            border: 1px solid #cbcbcb!important;
            border-left: none!important;
            border-right: none!important;
            float: left!important;
            text-align: center!important;
            outline: none!important;
        }
        `)
    }
    dispose(){
        this.left.removeEventListener("click",this.clickHandler);
        this.right.removeEventListener("click",this.clickHandler);
        this.input.removeEventListener("input",this.inputHandler);
        this.left=null;
        this.right=null;
        this.input=null;
        this.elem.remove();
        this.elem=null;
    }
    static dispose(){
        StepNumber.stepList.forEach(item=>item.dispose());
        StepNumber.stepList.length=0;
    }
}